import React, { Component } from 'react';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import isEmpty from 'lodash/isEmpty';
import { Menu, Skeleton } from 'antd';
import styles from './Info.less'

import router from 'umi/router';

const { Item } = Menu;

@connect(({ product }) => ({
  currentProduct: product.currentProduct,
}))
class MainView extends Component {
  state = {
    menuMap: {},
    productType: {
      today: {
        code: 10000,
        name: '当日达'
      }, tomorrow: {
        code: 10001,
        name: '次日达'
      }, time: {
        code: 10002,
        name: '限时特惠'
      }
    },
    selectKey: 'base',
    currentType: 'today'
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { productType } = this.state;
    let type = Object.keys(productType).filter(item => location.pathname.includes(item))[0]
    this.setState({ currentType: type })
    let id = 10000;
    switch (type) {
      case 'today':
        id = 10000
        break;
      case 'tomorrow':
        id = 10001
        break;
      case 'time':
        id = 10002
        break
      default:
        id = 10000
    }
    dispatch({
      type: 'product/fetchCurrent',
      payload: {
        pathParams: {
          id,
        },
      },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: 'product/clearCurrent' });
  }

  componentWillReceiveProps(nextProps) {

    const { currentProduct, match, location } = nextProps;
    const { currentType } = this.state;
    let selectKey = location.pathname.replace(`${match.path}/`, '');
    let disabled = true;
    if (!isEmpty(currentProduct)) {
      disabled = false;
    }
    let menuMap = {
      base: {
        path: `/product/${currentType}/info/base`,
        title: '基本信息',
      },
      // weight: {
      //   path: `/product/${currentType}/info/weight`,
      //   title: '计重规则',
      //   disabled,
      // },
      service: {
        path: `/product/${currentType}/info/service`,
        title: '服务配置',
        disabled,
      },
      operationLog: {
        path: `/product/${currentType}/info/operationLog`,
        title: '操作日志',
        disabled
      },
    };
    let idx = selectKey.search('/');
    if (idx > -1) {
      selectKey = selectKey.substr(0, idx);
    }
    selectKey = menuMap[selectKey] ? selectKey : Object.keys(menuMap)[0];
    this.setState({
      menuMap,
      selectKey
    })
  }
  selectKey = ({ key }) => {
    const { menuMap } = this.state;
    router.push(menuMap[key].path);
    this.setState({
      selectKey: key,
    });
  };
  getMenu = () => {
    const { menuMap } = this.state;
    return Object.keys(menuMap).map(item => {
      let { hideInMenu } = menuMap[item];
      if (hideInMenu) return;
      return <Item key={item} disabled={menuMap[item].disabled}>{menuMap[item].title}</Item>
    });
  };
  render() {
    const { children, currentProduct } = this.props;
    let loading = isEmpty(currentProduct)
    const { selectKey, currentType, productType } = this.state;
    return (
      <PageHeaderWrapper title={productType[currentType].name}>
        <GridContent>
          {
            loading &&
            <Skeleton active />
          }
          {
            !loading &&
            <div
              className={styles.main}
              ref={ref => {
                this.main = ref;
              }}
            >
              <div className={styles.leftMenu}>
                <Menu mode='inline' selectedKeys={[selectKey]} onClick={this.selectKey}>
                  {this.getMenu()}
                </Menu>
              </div>
              <div className={styles.right}>
                {children}
              </div>
            </div>
          }
        </GridContent>
      </PageHeaderWrapper >
    );
  }
}

export default MainView;
